<template>
	<view :style="{ '--bgcolor': pageData.bgColor, '--price-color': pageData.priceColor || '#E90B08', '--color': color }" v-if="infoData.length">
		<!-- 一行两个 -->
		<view class="content d-flex f-wrap j-sb" v-if="pageData.listStyle == 2" :style="{ '--height-2': pageData.picScale ? 332 * pageData.picScale + 'rpx' : '332rpx' }">
			<view class="list m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item.goods_id)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_img bor_radius_top10"></image>
				<view class="mask2" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold2"></image>
				</view>
				<view class="cont rows d-flex f-column padding10 j-sb">
					<view class="black size30 ellipsis_2" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
					<view class="row a-center">
						<view class="flex-1">
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
							<view class="h6 color_77 bold300 m-left10 d-inline-block" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
						</view>
						<view
							class="iconfont size42 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"
						></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 一行一个 -->
		<view class="content" v-if="pageData.listStyle == 1">
			<view
				class="list1 row bgwhite bor_radius_10 m-bot20"
				:class="{ shadow: pageData.shadow == 1 }"
				v-for="(item, index) in infoData"
				:key="index"
				@click="toGoods(item.goods_id)"
			>
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
				<view class="mask1" v-if="!item.stock"></view>
				<image :src="imgUrl + 'sold.png'" class="sold1" v-if="!item.stock"></image>
				<view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
					<view class="rows m-top20">
						<text class="black size32 ellipsis_2" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</text>
						<text class="color_77 size28 m-top20 ellipsis bold300">{{ item.info }}</text>
					</view>
					<view class="row j-sb a-center m-bot20">
						<view>
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="size26 line-through color_C0 bold300 m-left10">￥{{ parseFloat(item.full_price) }}</text>
							<view class="h6 color_77 bold300 m-top10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
						</view>
						<view
							class="iconfont size42 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"
						></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 一行三个 -->
		<view class="content" v-if="pageData.listStyle == 3">
			<view class="padding30-20 bgwhite bor_radius_20" :class="{ shadow: pageData.shadow == 1 }">
				<view class="d-flex a-center">
					<view class="flex-1 size32 bold">{{ pageData.title }}</view>
					<view class="m-left20 color_99" @click="toCates">
						<text>更多</text>
						<text class="iconfont icon-xiangyouxiayiye h6"></text>
					</view>
				</view>
				<view class="d-flex f-wrap">
					<view class="list3 m-top30" v-for="(item, index) in infoData" :key="index" @click="toGoods(item.goods_id)">
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_10 m-bot10"></image>
						<view class="size28 ellipsis m-bot10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
						<view class="m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
						</view>
						<view class="h6 color_77 bold300 m-bot10" v-if="!pageData.hideSales">已售{{ item.sales_number }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 大图模式 -->
		<view class="content" v-if="pageData.listStyle == 4" :style="{ '--height-4': pageData.picScale ? 690 * pageData.picScale + 'rpx' : '460rpx' }">
			<view
				class="list_4 p-re bgwhite bor_radius_10 m-bot20"
				:class="{ shadow: pageData.shadow == 1 }"
				v-for="(item, index) in infoData"
				:key="index"
				@click="toGoods(item.goods_id)"
			>
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_top10"></image>
				<view class="mask4 bor_radius_10" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold4"></image>
				</view>
				<view class="padding20">
					<view class="black size36 ellipsis" :style="{ 'font-weight': pageData.fontWeight || 500 }">{{ item.name }}</view>
					<view class="color_33 size30 ellipsis m-top12 bold300">{{ item.info }}</view>
					<view class="row j-sb a-center m-top30">
						<view>
							<text class="price size30">￥</text>
							<text class="price size38 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="size30 line-through color_C0 bold300 m-left10">￥{{ parseFloat(item.full_price) }}</text>
							<text class="h6 color_77 bold300 m-left30" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
						</view>
						<view
							class="iconfont size46 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"
						></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 榜单 -->
		<view class="content" v-if="pageData.listStyle == 5">
			<view
				class="rank bor_radius_20 p-top30 p-left20"
				:style="{ backgroundImage: pageData.img ? 'url(' + pageData.img + ')' : 'url(' + imgUrl + 'goods_rank_bg.png' + ')' }"
			>
				<view class="size36 bold t-letter4 m-bot40 ellipsis" v-if="pageData.title" :style="{ color: pageData.titColor || 'white' }">{{ pageData.title }}</view>
				<view style="height: 88rpx" v-else></view>
				<swiper class="swiper" next-margin="160rpx">
					<swiper-item v-for="(group, index) in groups" :key="index">
						<view class="swiper-item bor_radius_20">
							<view class="m-bot24 d-flex p-re" v-for="item in group" :key="item.goods_id" @click="toGoods(item.goods_id)">
								<image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
								<view class="mask5" v-if="!item.stock"></view>
								<image :src="imgUrl + 'sold.png'" class="sold5" v-if="!item.stock"></image>
								<view class="flex-1 p-left20 p-top12">
									<view class="size28 color_22 ellipsis m-bot20" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
									<view>
										<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
										<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
									</view>
									<view
										class="btn size36 p-ab iconfont"
										:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
										:style="{ color: pageData.btnColor || '#E90B08' }"
									></view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 卡片轮播 -->
		<view class="content" v-if="pageData.listStyle == 6">
			<swiper class="cardSwiper" :current="current" previous-margin="120rpx" next-margin="120rpx" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in infoData" :key="index">
					<view
						class="item wh padding30 bgwhite bor_radius_10 text-center"
						@click="toGoods(item.goods_id)"
						:class="{ active: current == index, shadow: pageData.shadow == 1 }"
					>
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
						<view class="size30 ellipsis m-top10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
						<view class="m-top10 m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="h6 color_77 bold300 m-left10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
						</view>
						<view class="btn white d-inline-block" :style="{ background: pageData.btnColor || '#E90B08' }">
							<text class="iconfont h6 m-right8" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"></text>
							<text>{{ item.price_name || '立即购买' }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="flexac m-top30">
				<view class="indicator bor_radius_10" :class="{ active: current == index }" @click="current = index" v-for="(item, index) in infoData" :key="index">
					<image :src="$imgUrls(item.img)" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 一行两个(居中) -->
		<view class="content d-flex f-wrap j-sb" v-if="pageData.listStyle == 7" :style="{ '--height-2': pageData.picScale ? 332 * pageData.picScale + 'rpx' : '332rpx' }">
			<view class="list text-center m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in infoData" :key="index" @click="toGoods(item.goods_id)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_img bor_radius_top10"></image>
				<view class="mask2" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold2"></image>
				</view>
				<view class="black size26 ellipsis_2 m-top10" :style="{ 'font-weight': pageData.fontWeight || 300 }">{{ item.name }}</view>
				<view class="m-top10">
					<text class="price size26">￥</text>
					<text class="price size34 bold500">{{ parseFloat(item.price) }}</text>
					<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
					<text class="h6 color_77 bold300 m-left10 line-through">￥{{ parseFloat(item.full_price) }}</text>
					<view class="h6 color_77 bold300 m-left10 d-inline-block" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
				</view>
				<view class="btn flexac size28" :style="{ '--btn-color': pageData.btnColor || '#E90B08' }">购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'product',
	props: ['pageData'],
	data() {
		return {
			infoData: [],
			groups: [],
			imgUrl: this.imgUrl + 'Uploads/diy/img/',
			current: 0
		};
	},
	computed: {
		...mapState(['color'])
	},
	mounted() {
		this.getBlockInfo();
	},
	methods: {
		async getBlockInfo() {
			const result = await this.$getBlockInfo(this.pageData.list);
			if (!result.list.length) {
				this.infoData = [];
				this.groups = [];
				return;
			}
			this.infoData = result.list || [];
			if (this.pageData.listStyle == 5) {
				this.groups = [];
				let size = 4;
				for (let i = 0; i < this.infoData.length; i += size) {
					let group = this.infoData.slice(i, i + size);
					this.groups.push(group);
				}
			}
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		toGoods(id) {
			let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + id;
			if (this.pageData.mode == 1) path = path + '&mode=1';
			if (this.pageData.mode == 2) path = path + '&mode=1&scan=1';
			this.toUrl(path);
		},
		toCates() {
			if (!this.pageData.mode) {
				let arr = this.infoData.map((item) => item.up_classify_id);
				let classifyId = '';
				if (new Set(arr).size == 1) classifyId = [...new Set(arr)][0];
				this.$rectTo('/pages/classify/classify?classifyId=' + classifyId);
			}
			if (this.pageData.mode == 1) this.$rectTo('/pages/classify/repast');
			if (this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder');
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 30rpx;
	background-color: var(--bgcolor);
}
// 一行两个
.list {
	width: 332rpx;
	// height: 500rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	.cont {
		min-height: 168rpx;
	}
	.sold2 {
		width: 148rpx;
		height: 148rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -74rpx 0 0 -74rpx;
	}
	.btn {
		width: 106rpx;
		height: 56rpx;
		border-radius: 30rpx;
		border: 1rpx solid var(--btn-color);
		color: var(--btn-color);
		margin: 20rpx auto;
	}
}
.list_img,
.mask2 {
	width: 332rpx;
	height: var(--height-2);
}
// 一行一个
.list1 {
	position: relative;
	.sold1 {
		width: 148rpx;
		height: 148rpx;
		position: absolute;
		top: 50%;
		margin-top: -74rpx;
		left: 72rpx;
	}
}
.list_imgs,
.mask1 {
	width: 292rpx;
	height: 292rpx;
}
// 一行三个
.list3 {
	width: 200rpx;
	image {
		width: 200rpx;
		height: 200rpx;
	}
	&:not(:nth-child(3n)) {
		margin-right: 25rpx;
	}
}
// 大图模式
.list_4 {
	width: 690rpx;
	image,
	.mask4 {
		width: 690rpx;
		height: var(--height-4);
	}
	.sold4 {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -100rpx 0 0 -100rpx;
	}
}
.mask1,
.mask2,
.mask4,
.mask5 {
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
}
.shadow {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
// 榜单
.rank {
	height: 800rpx;
	background-repeat: no-repeat;
	background-size: cover;
	.swiper {
		height: 650rpx;
		.swiper-item {
			width: 480rpx;
			height: 650rpx;
			background: rgba(255, 255, 255, 0.76);
			padding: 24rpx 28rpx 0 24rpx;
			.pic,
			.mask5 {
				width: 130rpx;
				height: 130rpx;
			}
			.sold5 {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				margin-top: -40rpx;
				left: 25rpx;
			}
			.btn {
				right: 0;
				top: 80rpx;
				z-index: 10;
			}
		}
	}
}
// 卡片轮播
.cardSwiper {
	height: 600rpx;
	.item {
		transform: scale(0.8);
		transition: transform 0.3s ease-in-out 0s;
		&.active {
			transform: scale(0.99);
		}
		.pic {
			height: 390rpx;
		}
		.btn {
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 16rpx;
			border-radius: 22rpx;
		}
	}
}
.indicator {
	width: 80rpx;
	height: 80rpx;
	margin: 0 8rpx;
	box-sizing: content-box;
	&.active {
		border: 2rpx solid var(--color);
	}
}
.price {
	color: var(--price-color);
}
</style>
